<template>
  <div>
    <h2>通知列表</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-input placeholder="请输入内容" v-model="input1" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>

    <div class="tab-content">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">

        <el-table-column label="ID" prop="ID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="180" align="center">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" align="center">
        </el-table-column>
        <el-table-column prop="relTime" label="发布时间" width="180" align="center">
        </el-table-column>
        <el-table-column prop="publisher" label="发布人" width="180" align="center">
        </el-table-column>
        <el-table-column prop="dep" label="部门" width="180" align="center">
        </el-table-column>

        <el-table-column prop="state" label="状态" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag disable-transitions type="primary" v-if="scope.row.state == '一般'">{{
              scope.row.state
            }}</el-tag>
            <el-tag disable-transitions type="warning" v-if="scope.row.state == '重要'">{{
              scope.row.state
            }}</el-tag>
            <el-tag disable-transitions type="danger" v-if="scope.row.state == '紧急'">{{
              scope.row.state
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="attachment" label="附件" width="180" align="center">
        </el-table-column>
        <el-table-column fixed="right" prop="operation" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="viewBul">查看</el-button>

          </template>
        </el-table-column>
      </el-table>

      <div class="block">

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="currentPage">
        </el-pagination>
      </div>
    </div>



</div>
</template>
<script>


export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      //状态下拉框的值
      options4: [

        {
          value: "选项1",
          label: "有效"
        },
        {
          value: "选项2",
          label: "无效"
        }

      ],

      //搜索框的内容
      input1: "",

      //多选的值
      multipleSelection: [],

      //表格数据
      tableData: [{
        ID: "1",
        type: "私海",
        title: "设备跟新",
        relTime: "2020-01-01",
        publisher: "盖茨",
        dep: "总医院",
        state: "一般",
        attachment: "",

      }],

      //表格的内容量共有几条
      currentPage: 1,
      //页码前往几页
      currentPage4: 1,
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {

    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //查看按钮
    viewBul(){
      this.$router.push("/pubNotice/viewBulletin")
    }
  }
};
</script>
<style  scoped>
h2 {
  margin: 15px;

}

.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-input {
  width: 200px;
}

.select {
  display: flex;
  flex-direction: column;
}

.labelText {
  text-align: left;
  float: left;
  font-size: 14px;
  font-weight: 600;
  color: black;
}

.el-form-item {
  display: flex;

  flex-direction: column;
}

.el-input {
  width: 250px;
}
.tab-content{
  margin: 10px;
}
</style>